<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<link rel="stylesheet" href="static/css/carManage.css" />
<link rel="stylesheet" href="../static/common.css" />

<body>
	<div class="rightBox">
		<div class="car-manage-title">
			<label>当前所在位置:</label><span>车队管理</span>
		</div>
		<div class="car-choose-type">
			<label>车辆状态:</label>
			<select class="car-state">
				<option>车辆运输状态</option>
				<option>车辆运输状态</option>
				<option>车辆运输状态</option>
				<option>车辆运输状态</option>
				<option>车辆运输状态</option>
			</select>
			<button type="button" class="btn btn-1">查询</button>
			<button type="button" class="btn btn-1 add-car-team">增加运输队</button>
		</div>
		<div class="car-manage-wrapper">
			<div class="wrapper-title">
				<div class="add-car-wrapper">
					<div class="add-wrapper-content">
						<div class="add-wrapper-content-left">
							<p>车主信息:</p>
							<div><label>车&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号:</label><input id="carTel"
									placeholder="请输入车号" /></div>
							<div><label>车&nbsp;&nbsp;载&nbsp;&nbsp;量:</label><input id="carAmount"
									placeholder="请输入车载量" /></div>
							<div><label>车主姓名:</label><input id="carName" placeholder="请输入车主姓名" /></div>
							<div><label>联系电话:</label><input id="carPhone" placeholder="请输入联系电话" /></div>
						</div>
						<div class="add-wrapper-content-right">
							<p>驾驶员信息:</p>
							<div><label>驾&nbsp;&nbsp;驶&nbsp;&nbsp;员&nbsp;1:</label><input id="carVehicleOwner1"
									class="left-input"
									placeholder="请输入驾驶员姓名" /><label>驾&nbsp;&nbsp;驶&nbsp;&nbsp;员&nbsp;1:</label><input
									id="carVehicleOwner2" class="right-input" placeholder="请输入驾驶员姓名" /></div>
							<div><label>联&nbsp;系&nbsp;电&nbsp;话:</label><input id="carVehicleOwnerPhone1"
									class="left-input"
									placeholder="请输入联系电话" /><label>联&nbsp;系&nbsp;电&nbsp;话:</label><input
									id="carVehicleOwnerPhone2" class="right-input" placeholder="请输入联系电话" /></div>
							<div>
								<label>请选择班次:</label>
								<select id="shifts1" class="">
									<option>请选择班次</option>
									<option>白班</option>
									<option>夜班</option>
								</select>
								<label class="classes">请选择班次:</label>
								<select id="shifts2" class="">
									<option>请选择班次</option>
									<option>白班</option>
									<option>夜班</option>
								</select>
							</div>
						</div>
					</div>
					<div class="bottom-footer"></div>
					<div class="add-wrapper-footer">
						<div class="btn-wrapper">
							<button type="button" class="btn btn-1 submit">提交</button>
							<button type="button" class="btn btn-1 cancel">取消</button>
						</div>
					</div>
				</div>
				<ul class="car-manage-wrapper-title">
					<li>车号</li>
					<li>车主姓名</li>
					<li>联系电话</li>
					<li>车载量</li>
					<li>加入时间</li>
					<li>司机1</li>
					<li>联系电话</li>
					<li>班次</li>
					<li>司机2</li>
					<li>联系电话</li>
					<li>班次</li>
					<li>车辆状态</li>
					<li>操作</li>
				</ul>
			</div>

			<div class="car-wrapper">
				<ul class="car-manage-wrapper-content">
					<li>1</li>
					<li>张三</li>
					<li>14444444444</li>
					<li>6</li>
					<li>2019/02/04</li>
					<li>张三</li>
					<li>14444444444</li>
					<li>白班</li>
					<li>张三</li>
					<li>14444444444</li>
					<li>白班</li>
					<li>正常运输</li>
					<li><span class="update">修改</span><span class="delete">删除</span></li>
				</ul>
				<ul class="car-manage-wrapper-content">
					<li>1</li>
					<li>张三</li>
					<li>14444444444</li>
					<li>6</li>
					<li>2019/02/04</li>
					<li>张三</li>
					<li>14444444444</li>
					<li>白班</li>
					<li>张三</li>
					<li>14444444444</li>
					<li>白班</li>
					<li>正常运输</li>
					<li><span class="update">修改</span><span class="delete">删除</span></li>
				</ul>
				<ul class="car-manage-wrapper-content">
					<li>1</li>
					<li>张三</li>
					<li>14444444444</li>
					<li>6</li>
					<li>2019/02/04</li>
					<li>张三</li>
					<li>14444444444</li>
					<li>白班</li>
					<li>张三</li>
					<li>14444444444</li>
					<li>白班</li>
					<li>正常运输</li>
					<li><span class="update">修改</span><span class="delete">删除</span></li>
				</ul>
				<ul class="car-manage-wrapper-content">
					<li>1</li>
					<li>张三</li>
					<li>14444444444</li>
					<li>6</li>
					<li>2019/02/04</li>
					<li>张三</li>
					<li>14444444444</li>
					<li>白班</li>
					<li>张三</li>
					<li>14444444444</li>
					<li>白班</li>
					<li>正常运输</li>
					<li><span class="update">修改</span><span class="delete">删除</span></li>
				</ul>
				<ul class="car-manage-wrapper-content">
					<li>1</li>
					<li>张三</li>
					<li>14444444444</li>
					<li>6</li>
					<li>2019/02/04</li>
					<li>张三</li>
					<li>14444444444</li>
					<li>白班</li>
					<li>张三</li>
					<li>14444444444</li>
					<li>白班</li>
					<li>正常运输</li>
					<li><span class="update">修改</span><span class="delete">删除</span></li>
				</ul>
				<ul class="car-manage-wrapper-content">
					<li>1</li>
					<li>张三</li>
					<li>14444444444</li>
					<li>6</li>
					<li>2019/02/04</li>
					<li>张三</li>
					<li>14444444444</li>
					<li>白班</li>
					<li>张三</li>
					<li>14444444444</li>
					<li>白班</li>
					<li>正常运输</li>
					<li><span class="update">修改</span><span class="delete">删除</span></li>
				</ul>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="../static/jquery-1.8.3.js"></script>
<script>
	$(function () {
		// var _state=1;
		$(".add-car-team").click(function (evevt) {
			var e = window.target || evevt;
			// if(_state==1){
			// 	_state=0;
			// 	$(".add-car-wrapper").stop().slideDown(function () { 
					
			// 	 },400);
				 
			// }
			// if(_state==0){
			// 	_state=1;
			// 	$(".add-car-wrapper").stop().slideUp(function () { 
					
			// 	 },400);
				
			// }
			clearContent();
			
			$(".add-car-wrapper").stop().toggle(400);
			// $(".add-car-wrapper").animate({"height":"393px"},200)
			e.stopPropagation();
		})
		//取消
		$(".cancel").click(function (evevt) {
			var e = window.target || evevt;
			$(".add-car-wrapper").stop().slideUp(400);
			clearContent();
			e.stopPropagation();
		})
		//更新
		$("body").on("click", ".update", function (evevt) {
			var e = window.target || evevt;
			$(".add-car-wrapper").stop().slideDown(400);
			e.stopPropagation();
		})
		//点击非区域块
		$(document).on("click", function (e) {
			var target = $(e.target);
			if (target.closest(".add-car-wrapper").length == 0) {
				$(".add-car-wrapper").slideUp(400);
			}
		})
		//删除
		$("body").on("click", ".delete", function (evevt) {
			var e = window.target || evevt;
			$(this).parent().parent().slideUp(1000)
			// setTimeout(function () { 
			$(this).parent().parent().remove();
			//  },1000)
			e.stopPropagation();
		})
		//保存信息
		$(".submit").click(function () {
			$(".add-car-wrapper").stop().slideUp(400);
			var obj = {
				carTel: $("#carTel").val(),
				carAmount: $("#carAmount").val(),
				carName: $("#carName").val(),
				carPhone: $("#carPhone").val(),
				carVehicleOwner1: $("#carVehicleOwner1").val(),
				carVehicleOwnerPhone1: $("#carVehicleOwnerPhone1").val(),
				carVehicleOwner2: $("#carVehicleOwner2").val(),
				carVehicleOwnerPhone2: $("#carVehicleOwnerPhone2").val(),
				shifts1: $("#shifts1 option:selected").val(),
				shifts2: $("#shifts2 option:selected").val()
			}
			var str = getCarAndUserMessage(obj);
			$(".car-wrapper").append(str);
		})
		$("body").on("mouseover", ".car-manage-wrapper-content", function () {
			$(this).children().css("color", "#ffffff");
		})
		$("body").on("mouseout", ".car-manage-wrapper-content", function () {
			$(this).children().css("color", "#000000");
		})
	})
	//数据展示
	function getCarAndUserMessage(obj) {
		var str = "";
		str += "<ul class='car-manage-wrapper-content'>" +
			"<li>" + obj.carTel + "</li>" +
			"<li>" + obj.carName + "</li>" +
			"<li>" + obj.carPhone + "</li>" +
			"<li>" + obj.carAmount + "</li>" +
			"<li>2019/02/04</li>" +
			"<li>" + obj.carVehicleOwner1 + "</li>" +
			"<li>" + obj.carVehicleOwnerPhone1 + "</li>" +
			"<li>" + obj.shifts1 + "</li>" +
			"<li>" + obj.carVehicleOwner2 + "</li>" +
			"<li>" + obj.carVehicleOwnerPhone2 + "</li>" +
			"<li>" + obj.shifts2 + "</li>" +
			"<li>正常运输</li>" +
			"<li><span class='update'>修改</span><span class='delete'>删除</span></li>" +
			"</ul>";
		return str;
	}
	//清空数据
	function clearContent() {
		$("#carTel").val("");
		$("#carAmount").val("");
		$("#carName").val("");
		$("#carPhone").val("");
		$("#carVehicleOwner1").val("");
		$("#carVehicleOwnerPhone1").val("");
		$("#carVehicleOwner2").val("");
		$("#carVehicleOwnerPhone2").val("");
		$("#shifts1").val("请选择班次");
		$("#shifts2").val("请选择班次");
	}
</script>

</html>